<template>
  <div class="full-calendar-header">
    <div class="header-left">
      <slot name="header-left"> </slot>
    </div>
    <div class="header-center">
      <span class="prev-month iconfont icon-fanhui" @click.stop="goPrev"></span>
      <!-- <span class="title">{{title}}</span> -->
      <el-select v-model="value" @change="changeSelectYear" style="width:100px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="value1" @change="changeSelectMonth" style="width:100px;">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span class="next-month iconfont icon-gengduo" @click.stop="goNext"></span>
    </div>
    <div class="StateThree">
      <!-- <div class="CircleData FirstGreen"></div>
            <div class="StateFirst">数据完整</div>
            <div class="CircleData FirstYellow"></div>
            <div class="StateSecond">数据残缺</div> -->
    </div>
    <div class="header-right">
      <slot name="header-right"> </slot>
    </div>
  </div>
</template>
<script>
// import dateFunc from './dateFunc'
import moment from 'moment'

export default {
  name: 'CalenderHeader',
  props: {
    currentMonth: {},
    titleFormat: {},
    firstDay: {},
    monthNames: {},
    locale: {}
  },
  data() {
    return {
      leftArrow: '<',
      rightArrow: '>',
      options: [],
      options1: [
        {
          value: '01月',
          label: '01月'
        },
        {
          value: '02月',
          label: '02月'
        },
        {
          value: '03月',
          label: '03月'
        },
        {
          value: '04月',
          label: '04月'
        },
        {
          value: '05月',
          label: '05月'
        },
        {
          value: '06月',
          label: '06月'
        },
        {
          value: '07月',
          label: '07月'
        },
        {
          value: '08月',
          label: '08月'
        },
        {
          value: '09月',
          label: '09月'
        },
        {
          value: '10月',
          label: '10月'
        },
        {
          value: '11月',
          label: '11月'
        },
        {
          value: '12月',
          label: '12月'
        }
      ],
      value: '',
      value1: ''
    }
  },
  mounted() {
    this.changeTitle()
    this.changYear()
  },
  computed: {
    title() {
      if (!this.currentMonth) return null
      return this.currentMonth.locale(this.locale).format('YYYY年MM月')
    }
  },
  methods: {
    changeTitle() {
      this.value = this.title.substring(0, 5)
      this.value1 = this.title.substring(5, 8)
    },
    changYear() {
      const YearArray = []
      for (let i = 1901; i <= 2100; i++) {
        const YearJson = {}
        YearJson.value = `${i}年`
        YearJson.lable = `${i}年`
        YearArray.push(YearJson)
      }
      this.options = YearArray
    },
    goPrev() {
      const newMonth = moment(this.currentMonth)
        .subtract(1, 'months')
        .startOf('month')
      this.$emit('change', newMonth)
      /* setTimeout(() => {
          this.changeTitle();
          }, 1); */
      this.value = newMonth.format('YYYY年MM月DD').substring(0, 5)
      this.value1 = newMonth.format('YYYY年MM月DD').substring(5, 8)
    },
    goNext() {
      const newMonth = moment(this.currentMonth)
        .add(1, 'months')
        .startOf('month')
      this.$emit('change', newMonth)
      /* setTimeout(() => {
          this.changeTitle();
          }, 1); */
      this.value = newMonth.format('YYYY年MM月DD').substring(0, 5)
      this.value1 = newMonth.format('YYYY年MM月DD').substring(5, 8)
    },
    changeSelectYear(val) {
      const nowTime = val + this.value1
      const moment123 = moment(nowTime, 'YYYY-MM-DD HH:mm:ss')
      this.$emit('change', moment123)
    },
    changeSelectMonth(val) {
      const nowTime = this.value + val
      const moment123 = moment(nowTime, 'YYYY-MM-DD HH:mm:ss')
      this.$emit('change', moment123)
    }
  }
}
</script>
<style scoped>
.full-calendar-header {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.full-calendar-header .header-left,
.full-calendar-header .header-right {
  flex: 0;
}

.full-calendar-header .header-center {
  flex: 3;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.full-calendar-header .header-center .title {
  margin: 0 10px;
  font-size: 22px;
  font-weight: bold;
  color: #797979;
}

.full-calendar-header .header-center .prev-month,
.full-calendar-header .header-center .next-month {
  cursor: pointer;
}

.full-calendar-header .header-center .prev-month {
  float: left;
  margin-left: 40px;
}

.full-calendar-header .header-center .next-month {
  float: right;
  margin-right: 40px;
}

.full-calendar-header .StateThree {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.full-calendar-header .StateThree div {
  margin: 0 5px;
}

.full-calendar-header .StateThree .FirstGreen {
  background: #accf81;
}

.full-calendar-header .StateThree .FirstYellow {
  background: #f9a101;
}

.full-calendar-header .StateThree .CircleData {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}
</style>
